<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>企业合同管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
</head>
<style>
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: teal;
    }

    .manage-system-login {
        width: 32em;
        height: 28em;
        position: fixed;
        top: calc((100% - 28em) / 2);
        left: calc((100% - 32em) / 2);
    }
</style>
<body>

<div class="manage-system-login">
    <div class="ui segment">
        <div class="ui center aligned grid">
            <div class="column">
                <h2 class="ui teal image header">
                    <div class="content">
                        企 业 合 同 管 理 系 统
                    </div>
                </h2>
                <form class="ui large form" action="/login" method="post" onsubmit="return dataValidate()">
                    <div class="ui stacked segment">
                        <div class="field">
                            <input type="hidden" th:value="${_csrf.token}" id="csrfToken"
                                   th:name="${_csrf.parameterName}">
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="username" id="username" value="admin" placeholder="请输入用户账号">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input type="password" name="password" id="password" value="1234" placeholder="请输入登陆密码">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input type="text" name="confirmCode" id="confirmCode" placeholder="请输入验证码">
                                <div><img src="" id="confirmCodeImage"></div>
                            </div>
                        </div>
                        <div>
                            <input type="submit" class="ui fluid large teal button"
                                   id="manage-system-login" value="点 击 登 陆">
                        </div>
                    </div>

                </form>

                <div class="ui red message">
                    注意：该系统属于本公司内部使用系统！
                </div>
            </div>
        </div>
    </div>
    <div class="ui red message"
         id="ErrorMessage"
         style="position: fixed; left: calc(100% / 2 - 6em); top: calc(100% / 3 + 5em); z-index: 2147483647; display: none">
        <i class="remove icon"></i>
        <span id="errorMsg">数据加载失败！</span>
    </div>
</div>

<script>
    $(() => {
        let message = "[[${session.message}]]";
        if ("" !== message) {
            showErrorPromptBox(message, 2);
        }
        getCode();
    })
    let message = "[[${session.message}]]";
    let csrfToken = $("#csrfToken").val();

    let dataValidate = () => {
        let username = $("#username").val().trim();
        let password = $("#password").val().trim();
        let confirmCode = $("#confirmCode").val().trim();
        if ("" === username) {
            showErrorPromptBox("请输入登陆账号！", 2);
            return false;
        }
        if ("" === password) {
            showErrorPromptBox("请输入登陆密码！", 2);
            return false;
        }
        if ("" === confirmCode) {
            showErrorPromptBox("请输入验证码！", 2);
            return false;
        }
        let status = verifyConfirmCode(confirmCode);
        if ("ERROR" === status) {
            showErrorPromptBox("验证码错误，请重新输入", 2);
            $("#confirmCode").val("");
            getCode();
            return false;
        }
        return true;
    }

    $("#confirmCodeImage").click(() => {
        getCode();
    });

    let getCode = () => {
        $.ajax({
            url: "validate/getCode",
            type: 'get',
            // data: "",
            // async: false,
            beforeSend: (request) => {
                request.setRequestHeader("_csrf", csrfToken);
            },
            success: (data) => {
                if (data != "") {
                    $("#confirmCodeImage").attr("src", "");
                    $("#confirmCodeImage").attr("src", data);
                } else {
                    showErrorPromptBox("验证码加载失败！", 2);
                }
            },
            error: () => {
                showErrorPromptBox("系统繁忙，请稍后访问！", 2);
            }
        });
    }

    let verifyConfirmCode = (code) => {
        let verifyStatus = "ERROR";
        let queryParam = {
            code: code
        }
        $.ajax({
            url: "validate/verifyCode",
            type: 'get',
            data: queryParam,
            async: false,
            beforeSend: (request) => {
                request.setRequestHeader("_csrf", csrfToken);
            },
            success: (data) => {
                verifyStatus = data;
            },
            error: () => {
                showErrorPromptBox("系统繁忙，请稍后访问！", 2);
            }
        });
        return verifyStatus;
    }

    let showErrorPromptBox = (message, duration) => {
        $("#ErrorMessage").show();
        if ("" !== message.trim()) {
            $("#errorMsg").text(message);
        }
        if ("" !== duration) {
            setTimeout(() => {
                closeErrorPromptBox();
            }, duration * 1000);
        }
    }

    let closeErrorPromptBox = () => {
        $("#ErrorMessage").hide();
        $("#errorMsg").text("数据加载失败！");
    }

</script>

</body>
</html>